<template>
    <button :class="classes" :type="innerType" :disabled="disabled" @click="handleClick">
        <c-icon v-if="icon" :icon="icon" :size="iconSize"></c-icon>
        <slot></slot>
    </button>
</template>

<script>
    export default {
        name: "CButton",
        props: {
            type: {
                validator(val) {
                    return ['default', 'primary', 'success', 'warning', 'danger', 'info', 'text'].includes(val);
                },
                default: 'default'
            },
            size: {
                validator(val) {
                    return ['small', 'default', 'large'].includes(val);
                },
                default: 'default'
            },
            innerType: {
                validator(val) {
                    return ['button', 'submit', 'reset'].includes(val);
                },
                default: 'button'
            },
            icon: String,
            disabled: Boolean,
        },
        data() {
            return {
                iconSize: 12,
            };
        },
        computed: {
            classes() {
                return ['c-button', `c-button-${this.type}`, `c-button-${this.size}`];
            }
        },
        methods: {
            handleClick(event) {
                this.$emit('click', event);
                this.$el.blur();
            }
        }
    };
</script>

<style lang="less">
    .c-button {
        display: inline-block;
        margin: 0;
        border: 1px solid transparent;
        text-align: center;
        vertical-align: middle;
        outline: 0;
        cursor: pointer;

        &:hover {
            opacity: 0.7;
        }

        &-default {
            padding: 3px 10px;
            border-radius: 3px;
            line-height: 1.5em;
            font-size: 14px;

            color: @color-font;
            background: #ececec;
            border-color: #dcdcdc;
        }
        &-small {
            padding: 3px 5px;
            border-radius: 2px;
            line-height: 12px;
            font-size: 12px;
        }
        &-large {
            padding: 5px 15px;
            border-radius: 5px;
            line-height: 16px;
            font-size: 16px;
        }
        &-primary {
            color: #fff;
            background: #409eff;
            border-color: #409eff;
        }
        &-success {
            color: #fff;
            background: #21c161;
            border-color: #21c161;
        }
        &-warning {
            color: #fff;
            background: #e47e27;
            border-color: #e47e27;
        }
        &-danger {
            color: #fff;
            background: #e43848;
            border-color: #e43848;
        }
        &-info {
            color: #fff;
            background: #27bbff;
            border-color: #21d0ff;
        }
        &-text {
            border-color: transparent;
            background: transparent;
            &:hover {
                opacity: 1;
                color: @color-font-active;
            }
        }
    }
</style>
